<template>
  <view class="card-container flex flex-wrap align-stretch bg-white">
    <view class="row tool-row">
      <view class="tool-left flex justify-between">
        <view class="dan-container">{{ dan }}</view>
        <view class="tuo-container">
          <view
            class="tuo-item"
            :class="reds.indexOf(number) > -1 ? 'number-is-red' : ''"
            v-for="(number, index) in tuo"
            :key="index"
          >
            {{ number }}
          </view>
        </view>
      </view>
      <view class="tool-right"></view>
    </view>
    <view class="row k-row">
      <canvas
        :canvas-id="'danCandle' + index"
        :id="'danCandle' + index"
        class="charts"
        @touchstart="touchLineA"
        @touchmove="moveLineA"
        @touchend="touchEndLineA"
      ></canvas>
    </view>
    <view class="row data-row flex justify-around">
      <view
        class="data-item"
        v-for="(keyName, index) in Object.keys(dataMap)"
        :key="index"
        v-if="typeof data[keyName] === 'number'"
      >
        <view class="item-name">{{ dataMap[keyName] }}</view>
        <view class="item-val">{{ data[keyName] }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import uCharts from '@/uni-components/u-charts/u-charts.js'
import { toggleFav } from '@/api/common.js'

export default {
  props: {
    dan: {
      type: [String, Number],
      default: 0,
    },
    tuo: {
      type: [Array],
      default: () => {
        return []
      },
    },
    reds: {
      type: [Array],
      default: () => {
        return []
      },
    },
    data: {
      type: [Object],
      default: () => {
        return {}
      },
    },
    caipiao_id: {
      type: [String, Object],
    },
    chu: {
      type: [String, Object],
    },
    zuhe: {
      type: [String, Object],
    },
    index: {
      type: Number,
    },
  },
  data() {
    return {
      canvasId: 'danCandle' + this.index,
      danCandle: null,
      cWidth: '',
      cHeight: '',
      pixelRatio: 1,
      itemCount: 20, //x轴单屏数据密度
      sliderMax: 50,
      dataMap: {
        yilou: '实出',
        cha: '差值',
        investment: '投资价值',
        supplement: '回补几率',
        cycle: '回补几率',
        cur: '当前遗漏',
        max: '最大遗漏',
      },
      yilouC: {
        series: [],
        categories: [],
      },
    }
  },
  methods: {
    showCandle(canvasId, chartData) {
      let _self = this
      this.danCandle = new uCharts({
        $this: _self,
        canvasId: canvasId,
        type: 'line',
        fontSize: 11,
        legend: { show: false },
        padding: [15, 20, 0, 15],
        dataPointShape: true,
        background: '#091522',
        pixelRatio: _self.pixelRatio,
        categories: chartData.categories,
        series: chartData.series,
        animation: true,
        enableScroll: true,
        xAxis: {
          disableGrid: true,
          itemCount: 10,
          scrollShow: false,
          itemCount: 3, //x轴单屏显示数据的数量，默认为5个
          scrollShow: false, //新增是否显示滚动条，默认false
          scrollAlign: 'right', //滚动条初始位置
        },
        yAxis: {
          splitNumber: 5,
          format: val => {
            return val.toFixed(0)
          },
        },
        width: _self.cWidth * _self.pixelRatio,
        height: _self.cHeight * _self.pixelRatio,
        extra: {
          line: {
            type: 'straight',
          },
        },
      })
    },
    setChart() {
      let categories = []
      let series = [
        {
          name: '',
          data: [],
        },
      ]

      if (typeof this.data.yilouC !== 'object') {
        return
      }

      this.data.yilouC.forEach(k => {
        categories.push(`${k.qihao}期`)
        series[0].data.push(k.quantity)
      })

      this.$set(this.yilouC, 'series', series)
      this.$set(this.yilouC, 'categories', categories)

      this.cWidth = uni.upx2px(654)
      this.cHeight = uni.upx2px(240)
      setTimeout(() => {
        this.showCandle('danCandle' + this.index, { series, categories })
      }, 200)
    },
    touchLineA(e) {
      this.danCandle.scrollStart(e)
      //下面是toolTip事件，如果滚动后不需要显示，可不填写
      this.danCandle.showToolTip(e, {
        format: function (item, category) {
          return category + ' ' + item.name + ':' + item.data
        },
      })
    },
    moveLineA(e) {
      this.danCandle.scroll(e)
    },
    touchEndLineA(e) {
      this.danCandle.scrollEnd(e)
    },
  },
  created() {
    this.setChart()
  },
}
</script>

<style lang="scss" scoped>
.card-container {
  margin: 28upx;
  padding: 0 20upx;
  height: 474upx;
  background: #ffffff;
  box-shadow: 0px 2px 6px 0px rgba(12, 124, 202, 0.1);
  border-radius: 20upx;

  .row {
    width: 100%;
  }

  .tool-row {
    height: 80upx;
    .tool-left {
      float: left;
      // width: 420upx;
      height: 80upx;
      padding: 0 16upx;

      .dan-container {
        line-height: 80upx;
        font-size: 32upx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #149eff;
        margin-right: 20upx;
        width: 80upx;
        text-align: center;
        background-color: #dfe5ea;
        border-radius: 0px 0px 12upx 12upx;
      }
      .tuo-container {
        background-color: #dfe5ea;
        border-radius: 0px 0px 12upx 12upx;
      }
      .tuo-item {
        line-height: 80upx;
        font-size: 32upx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #149eff;
        width: 80upx;
        display: inline-block;
        text-align: center;
        &.number-is-red {
          color: #da2626;
        }
      }
    }
    .tool-right {
      float: right;
      .fa-button {
        margin-top: 20upx;
        width: 120upx;
        height: 60upx;
        background: rgba(20, 158, 255, 1);
        border-radius: 30upx;
        font-size: 14px;
      }
      .faed-button {
        margin-top: 20upx;
        width: 136upx;
        height: 60upx;
        background-color: #71808a;
        border-radius: 30upx;
        color: #edf2f6;
        font-size: 24upx;
      }
    }
  }

  .k-row {
    width: 100%;
    height: 240upx;
    background-color: #091522;
    // border: 1px solid #e03997;
    .charts {
      width: 654upx;
      height: 240upx;
      background-color: #091522;
    }
  }

  .data-row {
    height: 108upx;
    .data-item {
      .item-name {
        height: 32upx;
        font-size: 22upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 32upx;
      }
      .item-val {
        height: 40upx;
        font-size: 28upx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 40px;
        text-align: center;
      }
    }
  }
}
</style>
